<template>
	<view class="page" style="height: 100vh;">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="value" :rules="rules" ref="uForm" labelWidth="auto" labelAlign="left" errorType="toast">
			<u-form-item label="姓名" prop="name" borderBottom required ref="name">
				<u--input v-model="value.name" border="none"></u--input>
			</u-form-item>
			<u-form-item label="电话" prop="phone" borderBottom required ref="phone">
				<u--input suffixIcon="phone-fill" v-model="value.phone" border="none"></u--input>
			</u-form-item>
			<u-form-item label="省市区" prop="country" borderBottom @click="countryVisible=true" required ref="country">
				<country v-model="value.country" :visible.sync="countryVisible" />
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="详细地址" prop="address" borderBottom labelPosition="top" required ref="address">
				<u--textarea placeholder="不低于3个字" v-model="value.address" count></u--textarea>
			</u-form-item>
			<!-- <text class="text-blue text-bold text-center">产品信息 </text> -->
			<u-form-item label="品牌" prop="brand" borderBottom required ref="brand" @click="brandPickerVisible = true">
				<brand-picker v-model="value.brand" type='brands' :visible.sync="brandPickerVisible" />
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="产品类型" prop="typeId" borderBottom required ref="typeId"
				@click="typePickerVisible = true">
				<!-- 变更产品类型时，清空故障 -->
				<type-picker v-model="value.typeId" :visible.sync="typePickerVisible" @confirm="value.faultType=''" />
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="产品型号" prop="goodsModel" borderBottom ref="goodsModel">
				<u--input v-model="value.goodsModel" border="none"></u--input>
			</u-form-item>

			<!-- 购买渠道 -->
			<u-form-item label="购买渠道" prop="channel" borderBottom required ref="channel"
				@click="channelPickerVisible = true">
				<brand-picker v-model="value.channel" type='channels' :visible.sync="channelPickerVisible" />
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<!-- 选择其他故障时才显示 -->
			<u-form-item v-if="type === 'fault'" label="故障" prop="faultType" borderBottom required ref="faultType"
				:visible.sync="faultPickerVisible" @click="faultPickerVisible = true">
				<fault-picker v-model="value.faultType" :typeId="value.typeId" :visible.sync="faultPickerVisible" />
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="上门日期" prop="date" borderBottom required ref="date" @click="datePickerVisible = true">
				<date-picker v-model="value.date" :visible.sync="datePickerVisible" />
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="上门时间" prop="time" borderBottom required ref="time" @click="timePickerVisible = true">
				<time-picker v-model="value.time" :visible.sync="timePickerVisible" />
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="备注" prop="info" borderBottom labelPosition="top" ref="info">
				<u--textarea placeholder="请录入备注信息" v-model="value.info" count></u--textarea>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
	</view>
</template>

<script>
	import DatePicker from './DatePicker.vue';
	import TimePicker from './TimePicker.vue';
	import brandPicker from './brandPicker.vue';
	import faultPicker from './faultPicker.vue';
	import typePicker from './typeIdPicker.vue';
	import country from './country.vue';
	import createRow from './createRow';
	import { empty } from '../../utils/test';

	export default {
		components: { DatePicker, TimePicker, brandPicker, faultPicker, typePicker, country },
		props: {
			// 故障fault|报装install(默认故障)
			type: {
				type: String,
				default: 'fault'
			},
			value: {
				type: Object,
				default: () => ({ ...createRow })
			}
		},
		data() {
			return {
				// 时间选择器是否显示
				datePickerVisible: false,
				timePickerVisible: false,
				brandPickerVisible: false,
				channelPickerVisible: false,
				faultPickerVisible: false,
				typePickerVisible: false,
				countryVisible: false,
				rules: {
					typeId: {
						type: 'number',
						required: true,
						message: '请选择产品类型',
						trigger: ['change'],
					},
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					phone: {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '请输入正确的手机号',
						trigger: ['change', 'blur'],
					},
					country: {
						type: 'array',
						required: true,
						message: '请选择省市区',
						trigger: ['change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['change']
					},
					brand: {
						validator: (rule, value, callback) => {
							return !!value
						},
						message: '请选择品牌',
						trigger: ['change', 'blur']
					},
					channel: {
						validator: (rule, value, callback) => {
							return !!value
						},
						message: '请选择购买渠道',
						trigger: ['change']
					},
					faultType: {
						validator: (rule, value, callback) => {
							return !!value
						},
						message: '请选择故障类型',
						trigger: ['change']
					},
					date: {
						required: true,
						message: '请填写期望上门日期',
						trigger: ['blur', 'change']
					},
					time: {
						type: 'string',
						required: true,
						message: '请填写期望上门时间',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {
			/**
			 * @example 提交维修的信息
			 * @returns {Object} 维修信息
			 */
			async submit() {
				const { value } = this
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				const [errMsg, ok] = await this.$await(this.$refs.uForm.validate());
				console.log('维修的信息', value, '校验失败', errMsg)
				//  uni.$u.toast('校验失败')
				if (errMsg) return
				this.$emit('input', this.value)
				this.$emit('submit', this.value)
			},

		},
		mounted() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style>
	.page {
		background-color: white;
		padding: 10px 15px 50px 15px;
		font-size: 20px;
	}
</style>